<template>
	<view class="bc">
		<view class="top">
			<text @tap="changeNav(0)" :class="currentIndex === 0 ? 'nav-actived' : '' "
				style="padding-bottom: 5rpx;">全部</text>
			<text @tap="changeNav(1)" :class="currentIndex === 1 ? 'nav-actived' : '' "
				style="padding-bottom: 5rpx;">未完成</text>
			<text @tap="changeNav(2)" :class="currentIndex === 2 ? 'nav-actived' : '' "
				style="padding-bottom: 5rpx;">待评价</text>
			<text @tap=" (3)" :class="currentIndex === 3 ? 'nav-actived' : '' " style="padding-bottom: 5rpx;">退款</text>
		</view>
		<!-- 全部-->
		<view v-if="currentIndex == 0">
			<!-- <view>暂未有订单哦~</view> -->
			<view class="order" v-for="(item, index) in orderData" :key="item.id">
				<view class="business">
					<text>订单号：{{item.id}}</text>
					<text class="Pending-payment">{{item.currentStatus}}</text>
				</view>
				<text class="time">下单时间:{{ formatTime(item.createTime) }}</text>
				<view class="food-Number" @click="toOrderDetail(item.id)">
					<view class="food-pane">
						<view class="food" v-for="food in item.foods" :key="food.id">
							<image :src="food.image" mode=""></image>
							<text class="food-name">{{ food.tasteName }}</text>
						</view>
					</view> 
					<view class="total-price">
						<view class="Number-price">
							<u-icon name="rmb" color="red" size="28rpx" bold="ture"></u-icon>
							<text>{{ item.totalPrice }}</text>
						</view>
						<text class="Number">共{{ item.foods.length }}件</text>
					</view>
				</view>
				<view class="button" @click="toPayMent(item.id)">
					<text v-if="item.currentStatus === '未支付'">去支付</text>
				</view>
			</view>
		</view>
		<!-- 未完成 -->
		<view v-if="currentIndex == 1">
			<view class="order" v-for="(item, index) in unfinishOrder" :key="item.id">
				<view class="business">
					<text>订单号：{{item.id}}</text>
					<text class="Pending-payment">{{item.currentStatus}}</text>
				</view>
				<text class="time">下单时间{{ formatTime(item.createTime) }}</text>
				<view class="food-Number" @click="toOrderDetail(item.id)">
					<view class="food-pane" v-for="food in item.foods" :key="food.id">
						<view class="food">
							<image :src="food.image" mode=""></image>
							<text class="food-name">{{ food.tasteName }}</text>
						</view>
					</view> 
					<view class="total-price">
						<view class="Number-price">
							<u-icon name="rmb" color="red" size="28rpx" bold="ture"></u-icon>
							<text>{{ item.totalPrice }}</text>
						</view>
						<text class="Number">共{{ item.foods.length }}件</text>
					</view>
				</view>
				<view class="button" @click="toPayMent(item.id)">
					<text v-if="item.currentStatus === '未支付'">去支付</text>
				</view>
			</view>
		</view>
		<!-- 待评价 -->
		<view v-if="currentIndex == 2">
			<view class="order" v-for="item in remainEvaluateData" :key="item.id">
				<view class="business">
					<text>订单号：{{item.id}}</text>
					<text class="Pending-payment">{{item.currentStatus}}</text>
				</view>
				<text class="time">下单时间:{{ formatTime(item.createTime) }}</text>
				<view class="food-Number" @click="toOrderDetail(item.id)">
					<view class="food-pane" v-for="food in item.foods" :key="food.id">
						<view class="food">
							<image :src="food.image" mode=""></image>
							<text class="food-name">{{food.tasteName}}</text>
						</view>
					</view> 
					<view class="total-price">
						<view class="Number-price">
							<u-icon name="rmb" color="red" size="28rpx" bold="ture"></u-icon>
							<text>{{ item.totalPrice }}</text>
						</view>
						<text class="Number">共{{ item.foods.length }}件</text>
					</view>
				</view>
				<view class="button" @click="toEvalution(item.id)">
					<text>去评价</text>
				</view>
			</view>
		</view>
		<view v-if="currentIndex == 3">
			<view class="refund">
				<text>暂无退款</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {  BusinessDetail, byUserId_OrderDetail, byOrderId_foodDetail, wxPay, editOrder, remainEvaluated } from '@/common/http.api.js'
	export default {
		data() {
			return {
				currentIndex: 0,
				businessData:{},
				shopData:this.$store.state.shopData,
				userId: this.$store.state.userId,
				orderData: [],
				unfinishOrder: [],
				remainEvaluateData: []
			}
		},
		onLoad() {
			BusinessDetail().then( res => {
				this.businessData = res.rows[0]
			})
			byUserId_OrderDetail(this.userId).then( res => {
				const requests = []
				res.rows.forEach( item => {
					requests.push(byOrderId_foodDetail(item.id))
				})
				Promise.all(requests).then( resp => {
					const orderData = [ ...res.rows ]
					orderData.forEach((item, index) => {
						item.foods = resp[index].rows
					})
					this.orderData = orderData
					// console.log(this.orderData)
					
					this.orderData.forEach( item => {
						if(item.currentStatus == '未支付' || item.currentStatus == '支付失败'){
							this.unfinishOrder.push(item)
						}
					})
					// console.log(this.unfinishOrder, 'unfinishOrder')
				})
			})
			
			//获取待评价订单
			remainEvaluated(this.userId).then( res => {
				// this.remainEvaluateData = res.rows
				const requests = []
				res.rows.forEach( item => {
					requests.push(byOrderId_foodDetail(item.id))
				})
				Promise.all(requests).then( resp => {
					const remainEvaluateData = [ ...res.rows ]
					remainEvaluateData.forEach((item, index) => {
						item.foods = resp[index].rows
					})
					this.remainEvaluateData = remainEvaluateData
					console.log(this.remainEvaluateData, '待评价')
				})
			})
		},
		methods: {
			changeNav(index) {
				this.currentIndex = index
			},
			totalNum(){
				for(let i=0; i<this.shopData.length; i++){
					let total = 0;
					total += parseFloat(this.shopData[i].sprice);
					return total
				}
			},
			number(){
				for(let i=0; i<this.shopData.length; i++){
					let num = 0;
					num += this.shopData[i].num;
					console.log(num, 'num')
					return num
				}
			},
			formatTime(time) {
				const orderTime = time ? new Date(parseInt(time)) : new Date()
				const year = orderTime.getFullYear()
				const mm = (orderTime.getMonth() + 1) < 10 ? ('0' + (orderTime.getMonth() + 1)) : (orderTime.getMonth() + 1)
				const dd = orderTime.getDate() < 10 ? ('0' + orderTime.getDate()) : orderTime.getDate()
				const hh = orderTime.getHours() < 10 ? ('0' + orderTime.getHours()) : orderTime.getHours()
				const min = orderTime.getMinutes() < 10 ? ('0' + orderTime.getMinutes()) : orderTime.getMinutes()
				const ss = orderTime.getSeconds() < 10 ? ('0' + orderTime.getSeconds()) : orderTime.getSeconds()
				return `${year}-${mm}-${dd} ${hh}:${min}:${ss}`
			},
			
			//支付
			toPayMent(id){
				uni.navigateTo({
					url: `/pagesA/home/closeAccount/closeAccount?orderId=${id}`
				})
			},
			
			//去订单详情页面
			toOrderDetail(id){
				uni.navigateTo({
					url: `/pagesB/order/orderDetail/orderDetail?orderId=${id}`
				})
			},
			
			//去评价页面
			toEvalution(id){
				uni.navigateTo({
					url: `/pagesB/order/toEvalution/toEvalution?orderId=${id}`
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f8fc;
	}

	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}

	.bc {
		background-color: #f7f7f7;
		border: 1rpx solid #f7f7f7;
	}

	.top {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
		padding: 0 5%;
		display: flex;
		justify-content: space-around;

	}

	.order {
		padding: 20rpx;
		width: 100vw;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 38rpx;
		box-sizing: border-box;
	}

	.business {
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0;
		font-size: 30rpx;
	}
	
	.Pending-payment {
		color: #e67920;
		font-weight: normal;
		font-size: 30rpx;
	}

	.food-Number {
		display: flex;
		margin-bottom: 20rpx;
	}

	.food-Number .total-price {
		text-align: center;
	}

	.food-Number .total-price .Number-price {
		width: 100%;
		display: flex;
		color: red;
		font-size: 35rpx;
		font-weight: bold;
		/* margin-left: 10rpx; */
		margin-top: 10rpx;
	}

	.food-Number .total-price .Number {
		font-size: 28rpx;
	}

	.food-pane {
		flex: 1;
		display: flex;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.order .food-pane .food {
		width: 120rpx;
		margin-top: 10rpx;
	}

	.food-pane .food image {
		margin-right: 15rpx;
		height: 110rpx;
		width: 110rpx;
		border-radius: 10rpx;
	}

	.time {
		font-size: 25rpx;
		color: #a7a6a8;
	}
	
	.order .button {
		display: flex;
		flex-direction: row-reverse;
	}
	
	.order .button text {
		padding: 5rpx 20rpx;
		color: #fff;
		font-size: 30rpx;
		border-radius: 10rpx;
		background-color: red;
	}

	.food .food-name {
		margin-top: 5rpx;
		font-size: 25rpx;
		display: block;
		text-align: center;
		color: #a7a6a8;
	}

	.bc .top .nav-actived {
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 3px solid orangered;
	}

	.refund {
		font-size: 50rpx;
		margin: 100rpx;
		text-align: center;
	}
</style>
